<!DOCTYPE html>
<meta charset="UTF-8">
<div style="padding: 10px;">
	<div id="tabtoolsid" data-type="tabs" style="width: 700px; height: 250px" data-defs="tools:'#tab-tools',border:true"></div>
</div>
<div id="tab-tools">
	<a href="javascript:void(0)" data-type="button" data-defs="plain:true,iconCls:'icon-add'" onclick="tabtools_add()"></a>
	<a href="javascript:void(0)" data-type="button" data-defs="plain:true,iconCls:'icon-delete'"
		onclick="tabtools_remove()"></a>
</div>
<script type="text/javascript">
	var tabtools_index = 0;
    function tabtools_add() {
	    tabtools_index++;
	    $('#tabtoolsid').tabs('add', {
	        title : 'Tab' + tabtools_index,
	        content : '<div style="padding:10px">tab' + tabtools_index + '</div>',
	        closable : true
	    });
    }
    function tabtools_remove() {
	    var tab = $('#tabtoolsid').tabs('getSelected');
	    if (tab) {
		    var index = $('#tabtoolsid').tabs('getTabIndex', tab);
		    $('#tabtoolsid').tabs('close', index);
	    }
    }
</script>
